{extend name="public/common"}

{block name="style"}
<title>加班考勤</title>
<link rel="stylesheet" href="/home/css/attendance/overtime.css?v={$Think.config.version}">
{/block}

{block name="body"}
<div id="app" v-cloak>
    <div class="tabbar">
        <div class="tabbar_item active">加班考勤</div>
        <div class="tabbar_item" @click="toListPage">我的加班</div>
    </div>
    <div class="map" id="container"></div>
<!--    <iframe id="geoPage" width="100%" height="30%" frameborder=0 scrolling="no"-->
<!--            src="https://apis.map.qq.com/tools/geolocation?key=your key&referer=myapp&effect=zoom"></iframe>-->
    <div class="body">
        <div class="schedule">
            <span class="circle"></span>
            <span class="line"></span>
            <span class="line" v-if="type == -1"></span>
            <span class="circle"></span>
        </div>
        <div class="content">
            <div :class="type == -1?'long':'short'">
                <p class="time" v-if="type == -1">上班时间： 9:00</p>
                <p class="in-off" v-if="type > -1">签到时间： {{detail.start_time | timeToString('ymdhi')}}</p>
                <div class="ball morning" v-if="type == -1" @click="sign(0)">
                    <p>签到</p>
                    <p>{{nowTime | timeToString('hi')}}</p>
                </div>
                <p class="address" v-if="type > -1">{{detail.start_address?detail.start_address:''}}</p>
            </div>
            <div>
                <p class="time" v-if="type < 1">下班时间： 17:00</p>
                <p class="in-off" v-if="type == 1">签退时间： {{detail.end_time | timeToString('ymdhi')}}</p>
                <div class="ball afternoon" v-if="type == 0" @click="sign(1)">
                    <p>签退</p>
                    <p>{{nowTime | timeToString('hi')}}</p>
                </div>
                <p class="address" v-if="type == 1">{{detail.end_address?detail.end_address:''}}</p>
            </div>
        </div>
    </div>
<!--    <div style="position: absolute;bottom: 30px;" id="test"></div>-->
</div>
{/block}

{block name="script"}
<script type="text/javascript">
    window._AMapSecurityConfig = {
        securityJsCode:'7341fb43349c2bf91e84a9ce5e3d4819',
    }
</script>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=ba9705da2a99c6e94c3c4fb5f48c685b"></script>
<script type="text/javascript" src="https://apis.map.qq.com/tools/geolocation/min?key=QGKBZ-3WNKX-JBP4I-ZIZAP-RMZAT-WMFTJ&referer=myapp"></script>
<script>
    // console.log({$detail})
    var vw = new Vue({
        el: "#app",
        data: {
            type: {$detail}.status,
            nowTime: new Date().getTime() / 1000,
            interval: null,
            refreshMap: null,
            detail: {$detail},
            map: null,
            geolocation: null
        },
        mounted() {
            var _this = this;
            _this.map = new AMap.Map('container', {
                resizeEnable: true,
                center: [120.904569,30.026134],
                zoom: 12
            });
            var marker = new AMap.Marker({
                position: new AMap.LngLat(120.904569,30.026134),   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
                title: '绍兴市上虞区排水管理有限公司'
            });
            _this.map.add(marker);
            AMap.plugin('AMap.Geolocation', function() {
                _this.geolocation = new AMap.Geolocation({
                    enableHighAccuracy: true,//是否使用高精度定位，默认:true
                    timeout: 3000,          //超过10秒后停止定位，默认：5s
                    buttonPosition:'RB',    //定位按钮的停靠位置
                    buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
                    zoomToAccuracy: true,   //定位成功后是否自动调整地图视野到定位点
                    GeoLocationFirst: true //默认为false，设置为true的时候可以调整PC端为优先使用浏览器定位，失败后使用IP定位
                });
                _this.map.addControl(_this.geolocation);
                _this.geolocation.getCurrentPosition(function(status,result){
                    if(status == 'complete'){

                    }else{
                        _this.$messagebox({   title: '定位失败',  message: '原因：'+result.message,  confirmButtonText: '知道了' })
                    }
                });
            });
            _this.interval = setInterval(function () {
                _this.nowTime = new Date().getTime() / 1000;
                _this.initMap();
            },60000)
            _this.refreshMap = setInterval(function () {
                // _this.initMap();
            },5000)
        },
        beforeDestroy() {
            clearInterval(this.interval);
            clearInterval(this.refreshMap);
        },
        methods: {
            initMap() {
                var _this = this;
                AMap.plugin('AMap.Geolocation', function() {
                    _this.geolocation.getCurrentPosition(function(status,result){
                        if(status == 'complete'){

                        }else{
                            _this.$messagebox({   title: '定位失败',  message: '原因：'+result.message,  confirmButtonText: '知道了' })
                        }
                    });
                });
            },
            sign(statusNum) {
                var _this = this;
                // _this.$indicator.open({
                //     text: '正在打卡中',
                //     spinnerType: 'triple-bounce'
                // });
                // _this.$http.post("{:Url('Attendance/overtime')}", {
                //     'address': '藏一缕元',
                //     'type': 1
                // }, {emulateJSON: true}).then(function (res) {
                //     console.log(res.data)
                //     var data = res.data;
                //     if (data.code == 1) {
                //         _this.$indicator.close();
                //         var time = new Date().getTime() / 1000;
                //         if(statusNum == 0) {
                //             _this.detail.start_time = time;
                //             _this.detail.start_address = '藏一缕元';
                //         }else{
                //             _this.detail.end_time = time;
                //             _this.detail.end_address = '藏一缕元';
                //         }
                //         _this.type = statusNum;
                //         _this.$toast({
                //             message: data.msg,
                //             duration: 1500
                //         });
                //     } else {
                //         _this.$indicator.close();
                //         _this.$toast({
                //             message: data.msg,
                //             duration: 1500
                //         });
                //     }
                // }, function (res) {
                //     _this.$indicator.close();
                //     _this.$toast({
                //         message: "打卡失败，请重试～",
                //         duration: 1500'
                //     });
                // });
                AMap.plugin('AMap.Geolocation', function() {
                    _this.geolocation.getCurrentPosition(function(status,result){
                        if(status == 'complete'){
                            var p1 = new AMap.LngLat(result.position.R,result.position.Q),
                                p2 = new AMap.LngLat(120.904569,30.026134),
                                dis = Math.round(p1.distance(p2));
                            // var dis = 299;
                            if(dis < 300) {
                                _this.$http.post("{:Url('Attendance/overtime')}", {
                                    'address': result.formattedAddress,
                                    'type': 1
                                }, {emulateJSON: true}).then(function (res) {
                                    console.log(res.data)
                                    var data = res.data;
                                    if (data.code == 1) {
                                        _this.$indicator.close();
                                        var time = new Date().getTime() / 1000;
                                        if(statusNum == 0) {
                                            _this.detail.start_time = time;
                                            _this.detail.start_address = result.formattedAddress;
                                        }else{
                                            _this.detail.end_time = time;
                                            _this.detail.end_address = result.formattedAddress;
                                        }
                                        _this.type = statusNum;
                                        _this.$toast({
                                            message: data.msg,
                                            duration: 1500
                                        });
                                    } else {
                                        _this.$indicator.close();
                                        _this.$toast({
                                            message: data.msg,
                                            duration: 1500
                                        });
                                    }
                                }, function (res) {
                                    _this.$indicator.close();
                                    _this.$toast({
                                        message: "打卡失败，请重试～",
                                        duration: 1500
                                    });
                                });
                            } else {
                                _this.$http.post("{:Url('Attendance/overtime')}", {
                                    'address': result.formattedAddress,
                                    'type': 2
                                }, {emulateJSON: true}).then(function (res) {
                                    // alert(JSON.stringify(res.data))
                                    var data = res.data;
                                    if (data.code == 1) {
                                        _this.$indicator.close();
                                        var time = new Date().getTime() / 1000;
                                        if(statusNum == 0) {
                                            _this.detail.start_time = time;
                                            _this.detail.start_address = result.formattedAddress;
                                        }else{
                                            _this.detail.end_time = time;
                                            _this.detail.end_address = result.formattedAddress;
                                        }
                                        _this.type = statusNum;
                                        _this.$toast({
                                            message: data.msg,
                                            duration: 1500
                                        });
                                    } else {
                                        _this.$indicator.close();
                                        _this.$toast({
                                            message: data.msg,
                                            duration: 1500
                                        });
                                    }
                                }, function (res) {
                                    _this.$indicator.close();
                                    _this.$toast({
                                        message: "打卡失败，请重试～",
                                        duration: 1500
                                    });
                                });
                            }
                        }else{

                            _this.$indicator.close();
                            _this.$messagebox({   title: '定位失败',  message: '原因：'+result.message,  confirmButtonText: '知道了' })
                        }
                    });
                });
            },
            // 跳转去我的加班的列表
            toListPage() {
                window.location.href = '/home/attendance/overtime_record.html';
            }
        }
    })
</script>
{/block}
